<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="navbar-content">
        <view class="left-section" @tap="goBack">
          <image
            src="/static/icons/left_arrow.png"
            class="back-icon"
            mode="aspectFit"
          ></image>
        </view>
        <text class="navbar-title">个人信息</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 头像区域 -->
      <view class="section avatar-section">
        <text class="section-title">头像</text>
        <view class="avatar-wrapper" @tap="chooseAvatar">
          <image
            :src="formData.face || '/static/images/avatar.png'"
            class="avatar"
          ></image>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="section">
        <uni-list>
          <uni-list-item 
            title="称谓" 
            :rightText="sexText || '暂未设置'"
            link
            @click="goToBasicInfo"
            showArrow
          />
          <uni-list-item 
            title="真实姓名" 
            :rightText="formData.realName || '暂未设置'"
            link
            @click="goToBasicInfo"
            showArrow
          />
          <uni-list-item 
            title="昵称" 
            :rightText="formData.nickName || '暂未设置'"
            link
            @click="goToBasicInfo"
            showArrow
          />
          <uni-list-item 
            title="手机号" 
            :rightText="formData.phone || '暂未设置'"
            showArrow
          />
          <uni-list-item 
            title="邮箱" 
            :rightText="formData.email || '暂未设置'"
            link
            @click="goToBasicInfo"
            showArrow
          />
          <uni-list-item 
            title="参加工作时间" 
            :rightText="formData.startWorkDate || '暂未设置'"
            link
            @click="goToBasicInfo"
            showArrow
          />
        </uni-list>
      </view>

      <!-- 我绑定的公司 -->
      <view class="section">
        <uni-list>
          <uni-list-item 
            title="我的职务" 
            :rightText="formData.position || '暂未设置'"
            link
            @click="goToCompanyInfo"
            showArrow
          />
          <uni-list-item 
            title="我认证的公司" 
            :rightText="formData.companyName || '暂无绑定公司'"
            link
            @click="goToCompanyInfo"
            showArrow
          />
        </uni-list>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { getHrInfoApi } from "@/api/user";
import { chooseFile, uploadFile2OSS } from "@/utils/file.js";
import { updateAvatarApi } from "../../../api/user";
import { showSeccessToast } from "../../../utils/toast";
import { getAvatarUploadSignApi } from "@/api/user";

const userStore = useUserStore();

// 性别选项
const sexOptions = [
  { value: 1, label: "男" },
  { value: 2, label: "女" },
  { value: 3, label: "保密" },
];

// 表单数据
const formData = ref({
  face: "",
  sex: 3,
  realName: "",
  nickName: "",
  phone: "",
  email: "",
  startWorkDate: "",
  position: "",
  companyName: "",
});

// 计算属性：性别文本
const sexText = computed(() => {
  const sexOption = sexOptions.find(
    (item) => item.value === formData.value.sex
  );
  return sexOption ? sexOption.label : "";
});

// 初始化数据
const initFormData = async () => {
  try {
    // 调用getHrInfoApi获取最新的HR信息
    const hrInfo = await getHrInfoApi();
    console.log('获取到的HR信息:', hrInfo);
    
    if (hrInfo) {
      formData.value = {
        face: hrInfo.face || hrInfo.avatar || "",
        sex: hrInfo.sex || 3,
        realName: hrInfo.realName || "",
        nickName: hrInfo.nickName || hrInfo.nickname || "",
        phone: hrInfo.phone || "",
        email: hrInfo.email || "",
        startWorkDate: hrInfo.startWorkDate || "",
        position: hrInfo.position || "",
        companyName: hrInfo.companyName || "",
      };
    }
  } catch (error) {
    console.error('获取HR信息失败:', error);
    // 如果API调用失败，回退到使用store中的数据
    const userInfo = userStore.userInfo;
    if (userInfo) {
      formData.value = {
        face: userInfo.face || "",
        sex: userInfo.sex || 3,
        realName: userInfo.realName || "",
        nickName: userInfo.nickName || userInfo.nickname || "",
        phone: userInfo.phone || "",
        email: userInfo.email || "",
        startWorkDate: userInfo.startWorkDate || "",
        position: userInfo.position || "",
        companyName: userInfo.companyName || "",
      };
    }
  }
};

const goBack = () => {
  // 返回mine页面
  uni.navigateBack();
};

// 选择头像
const chooseAvatar = async () => {
  const tempFilePath = await chooseFile({
    count: 1,
    mediaType: ["image"],
    sourceType: ["album", "camera"],
  });
  if (!tempFilePath) {
    return;
  }
  try {
    uni.showLoading({ title: "上传中..." });
    const tempAvatar = await uploadFile2OSS(tempFilePath, "avatar", getAvatarUploadSignApi);
    await updateAvatarApi(tempAvatar);
    await userStore.getUserInfoAction();
    uni.hideLoading();
    showSeccessToast("更新成功");
    await initFormData()
  } catch (e) {
    uni.hideLoading();
    uni.showToast({
      title: "头像上传失败",
      icon: "none",
    });
  }
};

// 跳转到基本信息编辑页面
const goToBasicInfo = () => {
  uni.navigateTo({
    url: "/pages/company/hrEdit/editBasicInfo",
  });
};

// 跳转到公司信息编辑页面
const goToCompanyInfo = () => {
  uni.navigateTo({
    url: "/pages/company/hrEdit/editCompanyInfo",
  });
};

onMounted(async () => {
  await initFormData();
});

// 定义onShow生命周期函数，当页面显示时刷新数据
function onShow() {
  console.log('editProfile页面onShow触发');
  initFormData();
}

// 定义onLoad生命周期函数，当页面加载时获取数据
function onLoad() {
  console.log('editProfile页面onLoad触发');
  initFormData();
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 导航栏 */
.navbar {
  background-color: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  /* 适配安全区域 */
  padding-top: var(--status-bar-height);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 88rpx;
  position: relative;
}

.left-section {
  display: flex;
  align-items: center;
  min-width: 80rpx;
  padding: 20rpx 0;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 20rpx 0;
}

.section {
  background-color: #fff;
  margin-bottom: 30rpx;
  padding: 0 30rpx;
}



.avatar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 30rpx;
}

/* 头像区域标题样式 */
.avatar-section .section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 0;
  display: block;
  text-align: left;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 10rpx;
  transition: background-color 0.2s;
}

.avatar-wrapper:active {
  background-color: #f5f5f5;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.avatar-tip {
  font-size: 28rpx;
  color: #999;
}

/* 调整uni-list字体大小和间距 */
:deep(.uni-list-item__container) {
  padding: 50rpx 15rpx !important;
}



:deep(.uni-list-item__content-title) {
  font-size: 35rpx !important;
  color: #333 !important;
  text-align: left !important;
}

:deep(.uni-list-item__extra-text) {
  font-size: 30rpx !important;
  color: #666 !important;
  font-weight: 500 !important;
}


</style>